<template>
  <div class="home">
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="never">
        <div class="welcome-content">
          <div class="welcome-icon">
            <el-icon size="64" color="#2e7d32"><School /></el-icon>
          </div>
          <h1 class="welcome-title">中山大学研究生院校企对接平台</h1>
          <p class="welcome-subtitle">促进产学研深度融合，助力研究生培养质量提升</p>
          
          <!-- 未登录状态显示 -->
          <div v-if="!userStore.isLoggedIn" class="login-prompt">
            <p class="prompt-text">请先登录以使用完整功能</p>
            <el-space>
              <el-button type="primary" size="large" @click="$router.push('/login')">
                <el-icon><User /></el-icon>
                立即登录
              </el-button>
              <el-button size="large" @click="$router.push('/register')">
                <el-icon><Plus /></el-icon>
                注册账户
              </el-button>
            </el-space>
          </div>
          
          <!-- 已登录状态显示 -->
          <div v-else class="user-welcome">
            <p class="welcome-user">欢迎回来，{{ userStore.currentUser?.name }}！</p>
            <div class="welcome-stats">
              <div class="stat-item">
                <div class="stat-number">{{ stats.totalProjects }}</div>
                <div class="stat-label">在研课题</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ stats.totalApplications }}</div>
                <div class="stat-label">申请记录</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">{{ stats.totalMatches }}</div>
                <div class="stat-label">成功匹配</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="features-section">
      <h2 class="section-title">平台功能</h2>
      <el-row :gutter="24">
        <el-col :span="8" v-for="feature in features" :key="feature.title">
          <el-card class="feature-card" shadow="hover">
            <div class="feature-icon">
              <el-icon size="32" :color="feature.color">{{ feature.icon }}</el-icon>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-desc">{{ feature.description }}</p>
            <el-button 
              type="primary" 
              @click="$router.push(feature.route)" 
              class="feature-btn"
              :disabled="!feature.available"
            >
              {{ feature.buttonText }}
            </el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="quick-actions">
      <h2 class="section-title">快速操作</h2>
      <el-space wrap>
        <el-button type="primary" size="large" @click="$router.push('/projects')">
          <el-icon><Search /></el-icon>
          浏览课题
        </el-button>
        <el-button 
          v-if="userStore.canPublishProject"
          type="success" 
          size="large" 
          @click="$router.push('/publish')"
        >
          <el-icon><Plus /></el-icon>
          发布课题
        </el-button>
        <el-button 
          v-if="userStore.canApplyProject"
          size="large" 
          @click="$router.push('/applications')"
        >
          <el-icon><List /></el-icon>
          查看申请
        </el-button>
        <el-button 
          v-if="userStore.canManageSystem"
          size="large" 
          @click="$router.push('/statistics')"
        >
          <el-icon><TrendCharts /></el-icon>
          数据统计
        </el-button>
      </el-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { School, Search, Plus, List, TrendCharts, Document, Setting, User } from '@element-plus/icons-vue'
import { mockStatistics } from '@/services/mockData'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const stats = mockStatistics

const features = computed(() => [
  {
    title: '课题发布',
    description: '企业可发布研究课题，详细描述需求和要求',
    icon: Document,
    color: '#2e7d32',
    route: '/publish',
    buttonText: '立即发布',
    available: userStore.canPublishProject
  },
  {
    title: '智能匹配',
    description: '基于研究方向和技术需求的智能匹配推荐',
    icon: Setting,
    color: '#4caf50',
    route: '/projects',
    buttonText: '开始匹配',
    available: true
  },
  {
    title: '申请管理',
    description: '导师和学生可申请课题，查看申请进度',
    icon: User,
    color: '#66bb6a',
    route: '/applications',
    buttonText: '查看申请',
    available: userStore.canApplyProject
  }
])
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-section {
  margin-bottom: 48px;
}

.welcome-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f8e9 100%);
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.welcome-content {
  text-align: center;
  padding: 48px 24px;
}

.welcome-icon {
  margin-bottom: 24px;
}

.welcome-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 16px;
  line-height: 1.3;
}

.welcome-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.5;
}

.login-prompt {
  margin-top: 32px;
}

.prompt-text {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.user-welcome {
  margin-top: 32px;
}

.welcome-user {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 24px;
}

.welcome-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 32px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.features-section {
  margin-bottom: 48px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 24px;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
}

.feature-card {
  text-align: center;
  padding: 32px 24px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(46, 125, 50, 0.15);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.feature-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  min-height: 44px;
}

.feature-btn {
  width: 100%;
}

.feature-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quick-actions {
  text-align: center;
  margin-bottom: 48px;
}

.quick-actions .el-button {
  padding: 12px 24px;
  font-size: 16px;
}

.quick-actions .el-button .el-icon {
  margin-right: 8px;
}
</style>
